<template>
    <div>
        <MyTable :arr='list'>
            <template #head>
                <th>#</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>标签</th>
                <th>操作</th>
            </template>
            <template v-slot:body='x'>
                <td>{{x.i+1}}</td>
                <td>{{x.alist.goods_name}}</td>
                <td>{{x.alist.goods_price}}</td>
                <td>
                    <button class="btn btn-primary btn-sm" v-if="!x.alist.inputVisible"
                        @click="x.alist.inputVisible=true">+Tag</button>
                    <input type="text" v-else v-jujiao @keydown.enter="enterfn(x.alist)"
                        @blur='x.alist.inputVisible = false' v-model="x.alist.inputValue">
                    <span class="btn btn-primary btn-sm" v-for="item,index in x.alist.tags" :key="index">
                        {{item}}
                    </span>
                </td>
                <td>
                    <button class="btn btn-danger btn-sm" @click="del(x.i)">删除</button>
                </td>
            </template>
        </MyTable>
    </div>
</template>

<script>
    import MyTable from "../../components/MyTable";
    import axios from "axios";
    axios.defaults.baseURL = "https://www.escook.cn";
    export default {
        components: {
            MyTable,
        },
        data() {
            return {
                list: [] // 所有数据
            };
        },
        created() {
            axios({
                url: "/api/goods",
            }).then((res) => {
                this.list = res.data.data;
            });
        },
        methods: {
            del(i) {
                this.list.splice(i, 1)
            },
            enterfn(abc) {
                abc.tags.push(abc.inputValue)
            }
        },
        directives: {
            jujiao: {
                inserted(el) {
                    el.focus()
                }
            }
        }

    };
</script>